<template>
    <!-- 轮播图 -->
    <el-carousel class="xh" indicator-position="outside">
        <el-carousel-item v-for="item in imgArr">
            <el-image style="width: 100%; height: 100%" :src="`http://localhost:8080/${item.carouselimg}`" />
        </el-carousel-item>
    </el-carousel>
    <hr />
    <div class="center">
        <div class="common-layout ">
            <el-container>
                <el-aside width="700px">
                    <div class="tt">
                        <div class="bigimg" @click="buy(biglist.id)">
                            <el-image style="width: 600px; height: 700px" :src="`http://localhost:8080/${biglist.cimg}`"
                                class="image" />
                        </div>
                        <br />

                    </div>
                </el-aside>
                <el-aside width="500px">
                    <div class="nr">
                        <div class="title">
                            <h1>{{ biglist.cname }}</h1>

                        </div>
                        <div class="pricebox">
                            <div>销售价格</div>
                            <h1 class="price">￥&nbsp;&nbsp;{{ biglist.price }}</h1>
                            <h1 style="font-size: 30px;"> 作品描述：</h1>
                            <div class="description">{{ biglist.content }}</div>
                        </div>
                        <el-button type="danger" class="button" @click="buy(biglist.id)"><span>立即购买</span> </el-button>
                    </div>
                </el-aside>
            </el-container>
        </div>
        <div>
            <div class="content">
                <div v-for="(item, index) in list" class="img" @click="detail(index)">
                    <div>

                        <el-image style="width: 375px; height: 412px" :src="`http://localhost:8080/${item.cimg}`"
                            class="image1" />
                    </div>
                    <br>
                    <div class="js-info">
                        <p class="cname" style="font-size: 18px;line-height: 26px;height: 26px;">{{ item.cname }}</p>
                        <el-button type="info" plain style="margin-left: 290px; ">￥{{ item.price }}</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="vpi">
        <el-button round class="button1" @click="vpi">查看更多</el-button>
    </div>
    <div class="js">
        <div>
            <p class="cp">什么是数字藏品</p>
            <p style="text-align: center;">开启全新的数字艺术收藏之旅</p>
        </div>
        <div>
            <div class="d1">
                <!-- <el-image style="width: 375px; height: 412px" src="../assets/one.png"  /> -->
                <img src="../assets/one.png" alt="" class="img2">
                <br />
                <h1>唯一性</h1>

                每个数字藏品都是独一无二的，且具有不同属性，这些属性通常存储在元数据中，且铸造后不可篡改。
            </div>
            <div class="d1">
                <img src="../assets/two.png" alt="" class="img2">
                <br />
                <h1>可证明的稀缺性</h1>

                数字藏品铸造数量可通过公共区块链网络验证，数量固定，永恒不变，具有可证明性。
            </div>
            <div class="d1">
                <img src="../assets/three.png" alt="" class="img2">
                <br />
                <h1>不可分割性不可分割性</h1>

                每个数字藏品都是一个独立的个体,无法拆分,因此不能购买或寄售数字藏品的一部分,具有不可分割性。
            </div>
        </div>

    </div>
    <div class="wm">
        <div class="about">
            <p class="cp1">元艺Art</p>
            <p>未来是一个万物上链的数字世界,数字藏品应用不再局限于艺术品、收藏品,将会扩展到数字身份、版权许可、品牌授权等,元艺Art的使命是:构建一个头部数字藏品电商平台。</p>
        </div>
        <div class="about-w">
            <div class="about-w1">
                <h3>认证品牌+创作者自营品牌</h3>
                元艺Art对于认证过的创作者给予认证标识,确保作品真实性和质量，后续逐步将认证的权利让渡给社区。
            </div>
            <div class="about-w1">
                <h3>多种发行方式</h3>
                采用定价发行、盲盒发行、多形式拍卖等机制来确保不同范式的数字藏品都能够有合理的价格发现。
            </div>
            <div class="about-w1">
                <h3>完整生态场景</h3>
                元艺Art将与优质IP合作,保证作品的高质量，同时为收藏爱好者提供交换渠道，最终构建创作者、消费者、经纪人三位一体的完整生态，保证流动性。
            </div>
            <div class="about-w1">
                <h3>生态赋能优势</h3>
                扩大数字藏品应用场景，为数字藏品产品持续赋能，最终形成音乐、体育、动漫、艺术品、虚拟土地、域名等多领域协同发展生态
            </div>
        </div>
    </div>
</template>

<script>


export default {
    name: 'Homepage',

    data() {
        return {
            imgArr: [],
            biglist: {},
            list: [],
            sj: false,



        };
    },

    mounted() {
        this.$http.post("/HomeServlet/queryAll")
            .then((response) => {
                this.imgArr = response.data;
            })

        this.$http.post("/VpiServlet/queryAll")
            .then((response) => {
                this.biglist = response.data[0];
                this.list = response.data.splice(1, 6);

            })


    },

    methods: {
        vpi() {
            this.$router.push({
                path: 'vpi',
            })
        },
        buy(i){
            this.$router.push({
                name: 'detail',
                query: { id: i },
            });
        },
        detail(i) {
            var arr = this.list[i]
            this.$router.push({
                name: 'detail',
                query: { id: arr.id },
            });
        }
    }
};
</script>

<style lang="css" scoped>
.title {
    display: inline;
    font-weight: 700;
    font-size: 40px;
    line-height: 44px;
    color: #2c2c34;

}

.pricebox {
    background-color: #fff;
    border-radius: 30px;
}

.image {
    border-radius: 21px;
    /* box-shadow: 4px 4px 15px #00f; */

}

.price {
    font-size: 36px;
    line-height: 46px;
}

.button {
    width: 488px;
    height: 50px;
    /* outline: none;
    -ms-touch-action: auto;
    touch-action: auto; */
    margin-top: 190px;
}

.img {
    display: inline-block;
    height: 520px;
    box-shadow: 4px 4px 15px rgb(161, 160, 160);
    margin-left: 20px;
    margin-top: 20px;

}

.js {
    margin-top: -26px;

}

.button1 {
    width: 370px;
    height: 56px;
    margin-left: 34%;
}

.image1:hover {
    /* -webkit-filter: blur(2px); Chrome, Safari, Opera */
    filter: blur(8px);
}

.cp {
    text-align: center;
    line-height: 50px;
    font-size: 50px;
    margin-top: 200px;
}

.d1 {
    background-color: aliceblue;
    border-radius: 30px;
    display: inline-block;
    width: 370px;
    margin-left: 10px;
}

.img2 {
    margin-left: 150px;
    margin-top: -60px;
}

.cp1 {
    text-align: center;
    line-height: 50px;
    font-size: 50px;
    margin-top: 200px;
}

.about-w1 {
    display: inline-block;
    margin-left: 50px;
    width: 500px;
    height: 150px;
    background-color: rgb(70, 68, 68);
    color: #fff;
    border-radius: 21px;
    margin-top: 20px;
}

.js-info {
    overflow: hidden;
    position: relative;
}

.js-info .el-button {
    position: absolute;
    z-index: 9;
    top: 50%;
    transform: translateY(-50%);
}

.flex {
    display: flex;
    justify-content: space-around;
    margin-top: 40px;
}

.flex .d1 {
    padding: 10px;
    text-indent: 2em;
}

.wm {
    text-align: center;
}

.wm .about-w {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.wm .about-w1:nth-child(n+3) {
    margin-top: 50px;
}
</style>